<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-03-10 20:49:27
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 13:53:23
 -->
<template>
  <div>
    <vxe-pulldown ref="xDown4" transfer>
      <template v-slot>
        <el-input
          v-model="insideValue"
          :placeholder="placeholder"
          @input.native="onInput"
          @focus="onFocus"
          @keydown.native="onKeydown"
        >
          <el-button slot="suffix" type="text" @click="btnSelect">选择</el-button>
        </el-input>
      </template>
      <template v-slot:dropdown>
        <div class="my-dropdown4">
          <Select
            ref="selectTable"
            :keywords="insideValue"
            :post-method="postMethod"
            :columns-data="tableColumns"
            @cell-click="onCellClick"
          />
        </div>
      </template>
    </vxe-pulldown>
    <el-dialog
      :title="dialogTitle"
      width="80%"
      height="90%"
      top="30px"
      :visible.sync="isShowComegoList"
      destroy-on-close
      append-to-body
    >
      <component
        :is="comegoName"
        v-if="isShowComegoList"
        oper="select"
        @on-select="onComegoSelect"
      />
    </el-dialog>
  </div>
</template>
<script>
import CustomerList from '@/views/bsd/customer/list'
import SupplierList from '@/views/bsd/supplier/list'
import { getOptions as listCustomerData } from '@/api/bsd/customer/customer'
import { getOptions as listSupplierData } from '@/api/bsd/supplier/supplier'
import Select from './select.vue'
import cols from './select-cols.js'

export default {
  components: { Select, CustomerList, SupplierList },
  mixins: [cols],
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * 默认显示的文字
     */
    defaultValue: {
      type: String,
      default: ''
    },
    comegoName: {
      type: String,
      default: 'CustomerList'
    },
    placeholder: {
      type: String,
      default: '按编号,名称,地址搜索...'
    }
  },
  data() {
    return {
      insideValue: null,
      isShowComegoList: false
    }
  },
  computed: {
    dialogTitle: function() {
      if (this.comegoName === 'CustomerList') {
        return '选择客户'
      } else {
        return '选择供应商'
      }
    },
    postMethod: function() {
      const postMethod = this.comegoName === 'CustomerList' ? listCustomerData : listSupplierData
      return postMethod
    },
    tableColumns: function() {
      return this.comegoName === 'CustomerList' ? this.colsCustomer : this.colsSupplier
    }
  },
  watch: {
    'defaultValue': {
      handler(val) {
        this.insideValue = val
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    btnSelect() {
      this.isShowComegoList = true
    },
    setFocus() {
      this.$refs.input.focus()
    },
    handleSelectData(row) {
      const { id, name } = row
      this.$emit('input', id)
      this.$emit('change', row)
      this.insideValue = name
      this.isShowComegoList = false
      this.$refs.xDown4.hidePanel()
    },
    // ON
    onCellClick(params) {
      const { row } = params
      this.handleSelectData(row)
    },
    onComegoSelect(row) {
      this.handleSelectData(row)
    },
    onInput(e) {
      const value = e.target.value
      const keywords = value
      this.$refs.selectTable.searchGoods(keywords)
      this.$refs.xDown4.showPanel()
    },
    onFocus(params) {
      this.$refs.xDown4.showPanel()
    },
    onKeydown(e) {
      const { keyCode } = e
      const tableVm = this.$refs.selectTable.$refs.table
      const currentRow = tableVm.getCurrentRecord()
      const tableData = tableVm.getTableData().tableData
      if (currentRow) {
        const currentIndex = tableVm.getRowIndex(currentRow)
        let index = 0
        if (keyCode === 38) index = currentIndex - 1
        if (keyCode === 40) index = currentIndex + 1
        const data = tableData[index]
        tableVm.setCurrentRow(data)
      } else {
        const data = tableData[0]
        tableVm.setCurrentRow(data)
      }
      if (keyCode === 13 && currentRow) {
        this.handleSelectData(currentRow)
      }
    }
  }
}
</script>

<style scoped>

</style>
